-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Clean up Gallery block move/remove UI #16793
Conversation
@@ -19,7 +19,7 @@ ul.wp-block-gallery { | |||
outline: none; | |||
} | |||
|
|||
.is-selected { | |||
> .is-selected { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This works and I'm fine with it. Wanted to run by you a different approach to see what you think: figure.is-selected
(I'd also apply this to the is-transient
rule below for clarification). Those seem to be the only two rules that don't have a block/element class along with the modifier class.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure, that makes sense. I'll push a quick update to do that.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Left one suggestion, in case you think it makes sense. Otherwise, this is good to go.
Thanks, everyone! |
* Use larger buttons when we can. * Avoid adding selected border to the caption section of the image. * Remove hover/focus box shadows because they clash with the blue background. * Revise method of specifying the .is-selected class.
* Use larger buttons when we can. * Avoid adding selected border to the caption section of the image. * Remove hover/focus box shadows because they clash with the blue background. * Revise method of specifying the .is-selected class.
This PR tidies up a couple small visual bugs with the Gallery block's individual image controls. It also switches the buttons to appear larger when possible. This is helpful (especially on mobile) to create a more visible hit area for these previously-tiny controls.
1. Button size improvements:
Before
After
The buttons increase from 20 to 24px. Note that on larger screens, these buttons will shrink back down if there are more than 7 columns present. Is to prevent overlap:
2. Clean up extra
is-selected
border on the caption field.I'm not sure when this made its first appearance, but I believe it's unintentional?
Before
After
3. Removes box shadow from move/remove controls on hover and focus
These borders weren't working against the blue background.
Before
After